<template>
	<div class="wrap">
		<router-link :to="{path:'/home',query: {id:'',frompage:'js'}}">
			<el-button type="warning" size="small" class="btn" style='margin-right: 5px;margin-top: 30px;' icon="el-icon-menu">首页</el-button>
		</router-link>
		<!--<h1 style="width: 100%; text-align: center; height: 50px; line-height: 50px; ">全校教室课表</h1>-->
		<div style="overflow: hidden;margin-top: 20px;">
			<div>
				<span>教室</span>
				<el-select v-model="vjsid" style="width: 60%;" multiple placeholder="请选择" @change="search">
					<el-option v-for="i in comboxlist" :label="i.jsmc" :value="i.id">
					</el-option>
				</el-select>
			</div>
			<div class="topdiv">
				<el-checkbox-group style='width: 250px;' @change="getweek" v-model="checkList">
					<el-checkbox label="上午"></el-checkbox>
					<el-checkbox label="下午"></el-checkbox>
					<el-checkbox label="夜晚"></el-checkbox>
				</el-checkbox-group>
			</div>
			<div class="topdiv">
				<el-button size="mini" @click="setbtnday2(-7)" round>上周</el-button>
				<el-date-picker v-model="vtime" type="date" @change="setbtnday()" style="width: 150px;"> </el-date-picker>
				<el-button size="mini" @click="setbtnday2(7)" round>下周</el-button>
			</div>
		</div>
		<hr />
		<table class="tab">
			<tr style="background: whitesmoke;">
				<td style="width:60px;">教室</td>
				<td>
					<div class="lldiv">
						<table style="width: 100%;" border="0" cellspacing="" cellpadding="">
							<tr>
								<td style="width: 60px; height: 60px;">
									<p></p>
								</td>
								<td class="d1">周一({{butday1}})</td>
								<td class="d1">周二({{butday2}})</td>
								<td class="d1">周三({{butday3}})</td>
								<td class="d1">周四({{butday4}})</td>
								<td class="d1">周五({{butday5}})</td>
								<td class="d1">周六({{butday6}})</td>
								<td class="d1">周日({{butday7}})</td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
			<tr v-for="v in jskblist">
				<td style="background: #85A2C1; color: white; width: 60px;">{{v.jsmc}}</td>
				<td>

					<div v-if="showsw" class="lldiv">
						<table style="width: 100%;" border="0" cellspacing="" cellpadding="">
							<tr style="background: #8EC0F5;">
								<td style="width: 60px;">
									上午
								</td>
								<td class="d1">
									<p v-for="i in v.line1.sjd1":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line1.sjd2":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line1.sjd3":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line1.sjd4":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line1.sjd5":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line1.sjd6":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line1.sjd7":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
							</tr>
						</table>
					</div>
					<div v-if="showxw" class="lldiv">
						<table style="width: 100%;" border="0" cellspacing="" cellpadding="">
							<tr style="background: #86B9EE;">
								<td style="width: 60px;">
									下午
								</td>
								<td class="d1">
									<p v-for="i in v.line2.sjd1":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line2.sjd2":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line2.sjd3" :style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line2.sjd4":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line2.sjd5" :style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line2.sjd6" :style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line2.sjd7" :style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
							</tr>
						</table>
					</div>
					<div v-if="showyw" class="lldiv">
						<table style="width: 100%;" border="0" cellspacing="" cellpadding="">
							<tr style="background: #73B0EE;">
								<td style="width: 60px;">
									夜晚
								</td>
								<td class="d1">
									<p v-for="i in v.line3.sjd1":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line3.sjd2":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line3.sjd3":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line3.sjd4":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line3.sjd5":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line3.sjd6":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
								<td class="d1">
									<p v-for="i in v.line3.sjd7":style="i.st" @click="kbxx(i.id)" :class="i.css1">{{i.txt}}</p>
								</td>
							</tr>
						</table>
					</div>

				</td>
			</tr>
		</table>
		<DaikeComponent v-if="classtable"  @close="showdaike" :params="this.sjdlist"></DaikeComponent>
	</div>
</template>
<script>
	import qs from 'qs'
	import DaikeComponent from '@/view/educa/banjicourse/edit'
	export default {
		props: ['params'],
		components: {
			DaikeComponent
		},
		data() {
			return {
				classtable:false,
				vjsid: "Y",
				vtitle: '查看教室空闲时间',
				btnshowkb: false,
				showsw: true,
				showxw: true,
				showyw: true,
				comboxlist: [],
				butvallist: [],
				checkList: ['上午', '下午', '夜晚'],
				vtime: '',
				butday1: '',
				butday2: '',
				butday3: '',
				butday4: '',
				butday5: '',
				butday6: '',
				butday7: '',
				jskblist: [],
				portComponents: {

				},

			}
		},

		created() {
			this.$store.dispatch('changeTitle', '全校课表'); //修改title
			this.$store.dispatch('changeRouterIndex', '/educa/jskb'); //修改路由
			this.search()
			this.setbtnday2(0);
			this.getcomboxlist(); //laoshi
		},

		methods: {
			getcomboxlist() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'xxjs/getjsxlk', params2)
					.then(res => {
						let data = res.data.data;
						let list = data.list;
						this.comboxlist = list;
						//						console.log(this.comboxlist,59856)
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			getweek() {
				if(this.checkList.indexOf("上午") == -1) {
					this.showsw = false
				} else {
					this.showsw = true
				}
				if(this.checkList.indexOf("下午") == -1) {
					this.showxw = false
				} else {
					this.showxw = true
				}
				if(this.checkList.indexOf("夜晚") == -1) {
					this.showyw = false
				} else {
					this.showyw = true
				}
			},
			search() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					bjtime: this.butvallist[0] + '',
					edtime: this.butvallist[6] + '',
					jsids: this.vjsid + '',
					xxid: logininfo.xxid,
					yhid: logininfo.id,
					sd: this.checkList + '',
				})
				//执行
				this.axios.post(this.$store.state.api + 'xxjs/getjskxlist', params2)
					.then(res => {
						var rlst = [];
						var lso = {
							jsmc: '',
							list1: [],
							list2: [],
							list3: []
						};
						var lst = res.data.data.list;
						var tempjsmc = '';
						for(let i in lst) {
							if(tempjsmc != lst[i].jsmc) {
								lso = {
									jsmc: '',
									line1: {},
									line2: {},
									line3: {}
								};
								lso.jsmc = lst[i].jsmc;
								rlst.push(lso);
							}
							if(lst[i].sd == '上午') {
								lso.line1 = lst[i];
							} else if(lst[i].sd == '下午') {
								lso.line2 = lst[i];
							} else if(lst[i].sd == '夜晚') {
								lso.line3 = lst[i];
							}
							tempjsmc = lst[i].jsmc;
						}
						for(var i in rlst) {
							rlst[i].line1.sjd1 = this.setistly(rlst[i].line1.sjd1.split(","));
							rlst[i].line1.sjd2 = this.setistly(rlst[i].line1.sjd2.split(","));
							rlst[i].line1.sjd3 = this.setistly(rlst[i].line1.sjd3.split(","));
							rlst[i].line1.sjd4 = this.setistly(rlst[i].line1.sjd4.split(","));
							rlst[i].line1.sjd5 = this.setistly(rlst[i].line1.sjd5.split(","));
							rlst[i].line1.sjd6 = this.setistly(rlst[i].line1.sjd6.split(","));
							rlst[i].line1.sjd7 = this.setistly(rlst[i].line1.sjd7.split(","));

							rlst[i].line2.sjd1 = this.setistly(rlst[i].line2.sjd1.split(","));
							rlst[i].line2.sjd2 = this.setistly(rlst[i].line2.sjd2.split(","));
							rlst[i].line2.sjd3 = this.setistly( rlst[i].line2.sjd3.split(","));
							rlst[i].line2.sjd4 = this.setistly(rlst[i].line2.sjd4.split(","));
							rlst[i].line2.sjd5 = this.setistly(rlst[i].line2.sjd5.split(","));
							rlst[i].line2.sjd6 = this.setistly(rlst[i].line2.sjd6.split(","));
							rlst[i].line2.sjd7 = this.setistly(rlst[i].line2.sjd7.split(","));

							rlst[i].line3.sjd1 = this.setistly(rlst[i].line3.sjd1.split(","));
							rlst[i].line3.sjd2 = this.setistly(rlst[i].line3.sjd2.split(","));
							rlst[i].line3.sjd3 = this.setistly(rlst[i].line3.sjd3.split(","));
							rlst[i].line3.sjd4 =this.setistly( rlst[i].line3.sjd4.split(","));
							rlst[i].line3.sjd5 =this.setistly( rlst[i].line3.sjd5.split(","));
							rlst[i].line3.sjd6 = this.setistly(rlst[i].line3.sjd6.split(","));
							rlst[i].line3.sjd7 = this.setistly(rlst[i].line3.sjd7.split(","));
						}
						this.jskblist = rlst;
						this.searchLoading = false;
					}).catch(res => {})
			},
			kbxx(id){
				if(id.length>2){
					this.classtable = true
					this.sjdlist={id:id}
				}else{
					return
				}
				
			},
			showdaike() {
				this.classtable = false
//				this.search()
			},
			setistly(sjd){ 
					for(var i in sjd) {
						 var txt =sjd[i] ;
						 var st ="";
						 var id =-1;
						 var css1 ='';
						 if (txt.length>0  &&  txt.substring(0,1)=='<'){
						 	var inx = txt.indexOf("@");
						 	id  =txt.substring(inx+1);
						    txt= txt.substring(1,inx);
						 	st ="color:#64676A"; 
						 	css1 = "kbxxcs";
						 }
					    sjd[i] = {txt:txt ,st:st,id:id,css1:css1};
					}
					return  sjd;
			},

			cancel() {
				this.$emit('close', {
					type: 'edit',
					cancel: true
				})
			},
			addDate(date, days) {
				var d = new Date(date);
				d.setDate(d.getDate() + days);
				return d
			},
			getFormatDatemmdd(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = month + seperator1 + strDate;
				return currentdate;
			},
			getFormatDate(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			setbtnday2(wekstep) {
				if(wekstep == 0) {
					this.wek = 0;
				} else {
					this.wek = this.wek + wekstep;
				}
				var dd = this.addDate(new Date(), this.wek);
				this.vtime = this.getFormatDate(dd);
				this.setbtnday();
			},
			setbtnday() {

				this.butvallist = [];
				var d = this.addDate(new Date(), this.wek);
				var wk = d.getDay();
				var dd = this.addDate(d, (1 - wk));
				this.butday1 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (2 - wk));
				this.butday2 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (3 - wk));
				this.butday3 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (4 - wk));
				this.butday4 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (5 - wk));
				this.butday5 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (6 - wk));
				this.butday6 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (7 - wk));
				this.butday7 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				this.search()
			},
			/* 组件的弹框  */
			componentsShow(type, data) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.id
						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;
						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(!setting.cancel) {
							this.search();
						}
						return;
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.wrap {
		.topdiv {
			float: left;
			margin-left: 20px;
			height: 50px;
			line-height: 50px;
		}
		.kbxxcs:hover{
			background: red;
			cursor:pointer;
			color: white !important;
		}
		.tab {
			width: 93%;
			margin: 0 auto;
			border: 1px solid #D8DCE5;
			margin-top: 10px;
			font-size: 13px;
			td {
				text-align: center;
				border: 0.1px solid #D8DCE5;
				.lldiv {
					height: auto;
					overflow: hidden;
					table {
						td{
							width: 120px;
							p {
								height: 25px;
								line-height: 25px;
							}
						}
					}
				}
			}
		}
	}
</style>